<template>
  <div class="">
    <div class="pad_20 flex ba_f">
      <div class="fon_12 mar_r10 color_9">
        <span class="fon_14 color_3">选择门店：</span>
        <el-select v-model="form.shopValue" placeholder="请选择" @change="changeStore">
          <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.name+'(ID:'+item.id+')'"
                  :value="item.id">
          </el-option>
        </el-select>
<!--        <el-select v-model="form.timeType" placeholder="请选择" class="mar_l10">-->
<!--          <el-option label="自然日" value="1"></el-option>-->
<!--          <el-option label="自然月" value="2"></el-option>-->
<!--        </el-select>-->
<!--        <el-date-picker-->
<!--                v-model="form.time"-->
<!--                type="date"-->
<!--                placeholder="选择日期"-->
<!--                class="mar_l10"-->
<!--                v-if="form.timeType=='1'"-->
<!--                @change="changeTime">-->
<!--        </el-date-picker>-->
<!--        <el-date-picker-->
<!--                v-model="form.Mtime"-->
<!--                type="month"-->
<!--                placeholder="选择月"-->
<!--                class="mar_l10"-->
<!--                value-format=yyyy-MM-->
<!--                v-if="form.timeType=='2'"-->
<!--                @change="changeTime">-->
<!--        </el-date-picker>-->
      </div>
    </div>
    <div class="mar_t20 pad_20 ba_f">
      <div class="shuju_title">
        <div class="shuju_title_text">
          <span>商品分析</span>
        </div>
<!--        <div class="fon_12 ab r0 mar_r10 color_9">更新时间：2020-09-04 13:32:59</div>-->
      </div>
      <div class="main-icon flex t_l mar_t20">
        <div class="flex-1 t_l pad_20 bortColor">
          <div class="flex-bet flex-y-top">
            <div>
              <p class="title6 fon_14">已上架</p>
              <p class="fon_30 title35 lh16 pad_tb_20">{{zhData.upTotal}}</p>
            </div>
            <div class="toolTip">
              <el-tooltip effect="dark" placement="top">
                <div slot="content">已上架</div>
                <button type="button"
                        class="el-button question-button-tooltip el-tooltip el-button--text fon_12">
                  <span><i class="el-icon-question"></i></span>
                </button>
              </el-tooltip>
            </div>
          </div>
        </div>
        <div class="flex-1 t_l pad_20 bortColor">
          <div class="flex-bet flex-y-top">
            <div>
              <p class="title6 fon_14">库存不足</p>
              <p class="fon_30 title35 lh16 pad_tb_20">{{zhData.noTotal}}</p>
            </div>
            <div class="toolTip">
              <el-tooltip effect="dark" placement="top">
                <div slot="content">库存不足</div>
                <button type="button"
                        class="el-button question-button-tooltip el-tooltip el-button--text fon_12">
                  <span><i class="el-icon-question"></i></span>
                </button>
              </el-tooltip>
            </div>
          </div>
        </div>
        <div class="flex-1 t_l pad_20 bortColor">
          <div class="flex-bet flex-y-top">
            <div>
              <p class="title6 fon_14">已售罄</p>
              <p class="fon_30 title35 lh16 pad_tb_20">{{zhData.noneTotal}}</p>
            </div>
            <div class="toolTip">
              <el-tooltip effect="dark" placement="top">
                <div slot="content">已售罄</div>
                <button type="button"
                        class="el-button question-button-tooltip el-tooltip el-button--text fon_12">
                  <span><i class="el-icon-question"></i></span>
                </button>
              </el-tooltip>
            </div>
          </div>
        </div>
        <div class="flex-1 t_l pad_20 bortColor">
          <div class="flex-bet flex-y-top">
            <div>
              <p class="title6 fon_14">已下架商品</p>
              <p class="fon_30 title35 lh16 pad_tb_20">{{zhData.downTotal}}</p>
            </div>
            <div class="toolTip">
              <el-tooltip effect="dark" placement="top">
                <div slot="content">已下架商品</div>
                <button type="button"
                        class="el-button question-button-tooltip el-tooltip el-button--text fon_12">
                  <span><i class="el-icon-question"></i></span>
                </button>
              </el-tooltip>
            </div>
          </div>
        </div>
        <div class="flex-1 t_l pad_20 bortColor">
          <div class="flex-bet flex-y-top">
            <div>
              <p class="title6 fon_14">待上架</p>
              <p class="fon_30 title35 lh16 pad_tb_20">{{zhData.shelfTotal}}</p>
            </div>
            <div class="toolTip">
              <el-tooltip effect="dark" placement="top">
                <div slot="content">待上架</div>
                <button type="button"
                        class="el-button question-button-tooltip el-tooltip el-button--text fon_12">
                  <span><i class="el-icon-question"></i></span>
                </button>
              </el-tooltip>
            </div>
          </div>
        </div>
        <div class="flex-1 t_l pad_20 bortColor">
          <div class="flex-bet flex-y-top">
            <div>
              <p class="title6 fon_14">回收站</p>
              <p class="fon_30 title35 lh16 pad_tb_20">{{zhData.recycleTotal}}</p>
            </div>
            <div class="toolTip">
              <el-tooltip effect="dark" placement="top">
                <div slot="content">回收站</div>
                <button type="button"
                        class="el-button question-button-tooltip el-tooltip el-button--text fon_12">
                  <span><i class="el-icon-question"></i></span>
                </button>
              </el-tooltip>
            </div>
          </div>
        </div>
      </div>
      <div id="zhentiEch" style="height: 360px;" class="mar_t20"></div>
    </div>
    <div class="t_r mar_t20">
      <div class="fon_12 mar_r10 color_9">
        <span class="fon_14 color_3">时间筛选：</span>
        <el-date-picker
                v-model="form.time"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="yyyy年MM月dd日"
                class="mar_l10"
                @change="changeTime">
        </el-date-picker>
      </div>
    </div>
    <div class="mar_t20 pad_20 ba_f">
      <div class="shuju_title">
        <div class="shuju_title_text">
          <span>销量分析</span>
        </div>
        <div class="fon_14 ab r0 mar_r20 curs" @click="moreGoods">查看更多</div>
      </div>
      <div class="flex flex-y-top" style="height: 380px;">
        <div class="bflex-5">
          <div class="t_l">
            <div class="mar_t10 shuju_table">
              <el-table
                      :data="tableData11"
                      stripe
                      style="width: 100%">
                <el-table-column
                        prop="id"
                        label="排名"
                >
                </el-table-column>
                >
                <el-table-column
                        prop="name"
                        label="商品名称"
                >
                </el-table-column>
                <el-table-column
                        prop="count"
                        label="销量"
                >
                </el-table-column>
                >
                <el-table-column
                        prop="money"
                        label="销售额(元)">
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
        <div class="bflex-5 flex-center">
          <div id="mainEch" style="height: 280px;width:400px;margin-top: 40px"></div>
        </div>
      </div>
    </div>
    <div class="mar_t20 flex-bet ba_f pad_20">
<!--      <div class="flex-g-1 mar_l20" style="height: 380px;">-->
<!--        <div class="shuju_title">-->
<!--          <div class="shuju_title_text">-->
<!--            <span>销量榜</span>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="mar_t10 shuju_table">-->
<!--          <el-table-->
<!--                  :data="tableData"-->
<!--                  stripe-->
<!--                  style="width: 100%"-->
<!--          >-->
<!--            <el-table-column-->
<!--                    prop="id"-->
<!--                    label="排名"-->
<!--            >-->
<!--            </el-table-column>-->
<!--            >-->
<!--            <el-table-column-->
<!--                    prop="apply_name"-->
<!--                    label="商品名称"-->
<!--            >-->
<!--            </el-table-column>-->
<!--            >-->
<!--            <el-table-column-->
<!--                    prop="dt_operdate"-->
<!--                    label="销量榜">-->
<!--            </el-table-column>-->
<!--          </el-table>-->
<!--        </div>-->
<!--      </div>-->
      <div class="flex-g-1 mar_r20" style="height: 380px;">
        <div class="shuju_title">
          <div class="shuju_title_text">
            <span>支付金额榜</span>
          </div>
        </div>
        <div class="mar_t10 shuju_table">
          <el-table
                  :data="tableData"
                  stripe
                  style="width: 100%"
          >
            <el-table-column
                    prop="id"
                    label="排名"
            >
            </el-table-column>
            >
            <el-table-column
                    prop="name"
                    label="商品名称"
            >
            </el-table-column>
            >
            <el-table-column
                    prop="money"
                    label="销售额(元)">
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="flex-g-1" style="height: 380px;">
        <div class="shuju_title">
          <div class="shuju_title_text">
            <span>访客榜</span>
          </div>
        </div>
        <div class="mar_t10 shuju_table">
          <el-table
                  :data="tableData2"
                  stripe
                  style="width: 100%">
            <el-table-column
                    prop="id"
                    label="排名"
            >
            </el-table-column>
            >
            <el-table-column
                    prop="name"
                    label="商品名称"
            >
            </el-table-column>
            >
            <el-table-column
                    prop="count"
                    label="访客榜">
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <edit ref="edit"></edit>
  </div>
</template>
<script>
  import echarts from "echarts";
  import {goodsAnalysis} from "@/api/statistics";
  import {changeDate} from "@/utils/index";
  import {mapState} from "vuex";
  import Edit from "./components/moreGoods";
  export default {
    components: {Edit},
    mounted() {
      this.init();
      this.init2();
      window.addEventListener("resize", this.initchart);
    },
    // mounted() {
    //   this.bus.$emit('loading', true);
    //   this.init();
    // },
    data () {
      return {
        tableData: [{
          id: '1',
          apply_name: '测试商家1',
          dt_operdate: '100',
          end_time: '9525',
        }],
        tableData2:[],
        tableData11:[],
        form: {
          shopValue: '',
          timeType: '1',
          time: [new Date(),new Date()],
          Mtime: '',
        },
        options: [{
          value: '1',
          label: '全部'
        }],
        options2: [{
          value: '1',
          label: '自然日'
        }, {
          value: '2',
          label: '自然月'
        }],
        zhData:{
          upTotal:'',
          noTotal:'',
          noneTotal:'',
          downTotal:'',
          shelfTotal:'',
          recycleTotal:'',
        },
        echarts1_option: {
          color: ['#5654F5', '#4CA8FF', '#4EC478', '#FBA33F'],
          // tooltip: {
          //     trigger: 'item',
          //     formatter: '{a} <br/>{b}: {c} ({d}%)'
          // },
          legend: {
            orient: 'vertical',
            right: 0,
            data: ['总销售额','销量',]
          },
          series: [
            {
              name: '访问来源',
              type: 'pie',
              radius: ['40%', '60%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '16',
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: [
                {value: 35, name: '总销售额'},
                {value: 10, name: '销量'},
              ],
            }
          ]
        },
        echarts2_option: {
          color: ['#4284ED', '#42CCF0'],
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['商品总销量', '支付总金额']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            // 去除坐标轴上的刻度线
            axisTick: {
              show: false,
              lineStyle: {
                color: '#ccc',
                type: 'dashed'
              }
            },
            // x轴的字体样式
            axisLabel: {
              show: true,
              textStyle: {
                color: '#333',
                fontSize: '12'
              }
            },
            // x轴的颜色和宽度
            axisLine: {
              lineStyle: {
                color: '#4ECB73',
                width: 2,   //这里是坐标轴的宽度,可以去掉
              }
            },
            data: ['2020-8-17', '2020-8-16', '2020-8-15', '2020-8-14', '2020-8-13', '2020-8-12', '2020-8-11', '2020-8-11', '2020-8-11', '2020-8-11','2020-8-10'],
          },
          yAxis: {
            type: 'value',
            axisTick: {       //y轴刻度线
              "show": false
            },
            axisLine: {
              "show": false,
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#333',
                fontSize: '12'
              }
            },
            splitLine: {
              lineStyle: {
                type: 'dotted',
                color: '#DDDDDD',
              },
              show: true
            }
          },
          series: [
            {
              name: '商品总销量',
              type: 'line',
              stack: '总量',
              smooth: true,
              data: [10, 52, 75, 35, 40, 75, 30, 10, 52, 80, 25,]
            },
            {
              name: '支付总金额',
              type: 'line',
              stack: '总量',
              smooth: true,
              data: [10, 52, 20, 30, 25, 35, 80, 10, 52, 50, 60,]
            }
          ]
        },
      }
    },
    created() {
      // this.value = this.market[0].id
      // this.optionsShop = this.market
      this.form.shopValue = this.market[0].id
      this.options = this.market
    },
    computed:{
      ...mapState(['market'])
    },
    methods: {
      async init() {
        let startTime = '';
        let endTime = '';
        if(this.form.time){
          startTime  = changeDate(this.form.time[0]);
          endTime = changeDate(this.form.time[1]);
        }
        var params = {
          startTime,
          endTime,
          storeId:this.form.shopValue,
        }
        const {data} = await goodsAnalysis(params);
        // console.log(data)
        if (data) {
          this.zhData.upTotal = data.upTotal?data.upTotal:0
          this.zhData.noTotal = data.noTotal?data.noTotal:0
          this.zhData.noneTotal = data.noneTotal?data.noneTotal:0
          this.zhData.downTotal = data.downTotal?data.downTotal:0
          this.zhData.shelfTotal = data.shelfTotal?data.shelfTotal:0
          this.zhData.recycleTotal = data.recycleTotal?data.recycleTotal:0

          this.tableData = data.payFx
          this.tableData2 = data.userFx
          this.tableData11 = data.goodFx
          this.echarts2_option.series[0].data = data.goodTotal.map(item => item.money);
          this.echarts2_option.series[1].data = data.goodMoney.map(item => item.money);
          this.echarts2_option.xAxis.data = data.goodTotal.map(item => item.hours);
          this.echarts1_option.series[0].data[0].value = +data.totalMoney;
          this.init2()
          this.mainEch()

          this.bus.$emit('loading', false)
        }
      },
      initchart(){
        let myChart1 = echarts.init(document.getElementById('zhentiEch'))
        myChart1.resize()
      },
      mainEch(){
        let myChart = echarts.init(document.getElementById('mainEch'))
        myChart.setOption(this.echarts1_option, true)
      },
      init2() {
        let myChart = echarts.init(document.getElementById('zhentiEch'))
        myChart.setOption(this.echarts2_option, true)
      },
      changeStore(){
        this.init()
      },
      changeTime(){
        this.init()
      },
      moreGoods(){
        this.$refs["edit"].showEdit(this.form.time);
      },
    }
  }
</script>
